<template>
  <div style="margin-top: 20px;">

    <in-body>
      <div class="radioPosition" style="display: flex">
        <el-radio-group v-model="radioModel" type="vertical" @change="radioChange">
          <div>
            <el-radio-button label="新闻" />
          </div>
          <div>
            <el-radio-button label="资讯" />
          </div>
          <div>
            <el-radio-button label="公告" />
          </div>
        </el-radio-group>
      </div>
    </in-body>

    <div style="width: 1000px;margin-left: 280px;background-color: white;">
      <el-table
        :data="tableData"
        style="width: 100%;height: 520px;text-align: center"
        :cell-style="cellStyle"
      >
        <el-table-column
          align="center"
          :label="radioModel + '列表'"
        >
          <template slot-scope="scope">
            <span>{{ (searchData.pageNumber - 1) * searchData.pageSize + scope.$index+1 }} </span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="left"
          align="center"
          prop="title"
          width="900"
        >
          <template slot-scope="scope">
            <div style="width: 100%" @click="gotoNewDetail(scope.row.id)">
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div style="text-align: center">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalRecords"
      />
    </div>
  </div>
</template>

<script>

import { userGetNewList } from '@/api/new'

export default {
  data() {
    return {
      totalRecords: 1, // 分页总记录数
      radioModel: '新闻',
      tableData: [],
      searchData: { // 查询参数
        pageSize: 5,
        pageNumber: 1,
        type: 1
      }
    }
  },
  created() {
    this.getNewList()
  },
  methods: {
    gotoNewDetail(id) {
      console.log('跳转')
      this.$router.push({
        path: '/newList/newsDetails',
        query: {
          id: id
        }
      })
    },
    getNewList() { // 获取新闻资讯列表
      userGetNewList(this.searchData).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.totalRecords = res.data.total
      })
    },
    cellStyle() {
      return 'cursor: pointer'
    },
    radioChange() { // 切换radio按钮监听事件
      if (this.radioModel === '新闻') {
        this.searchData.type = 1
        this.getNewList()
      }
      if (this.radioModel === '资讯') {
        this.searchData.type = 2
        this.getNewList()
      }
      if (this.radioModel === '公告') {
        this.searchData.type = 3
        this.getNewList()
      }
    }
  }

}
</script>

<style lang="scss">
.radioPosition{
  position: fixed;
  top: 70px;
  left: 209px;
}

.el-radio{
  display: block;
  margin:10px 0;
}
.el-radio-button:first-child:last-child .el-radio-button__inner {
  border-radius: 0;
}
</style>
